<template>
  <div class="menu-wrapper">
    <template v-for="(item,index) in menu">
      <el-menu-item v-if="item.children == null" :key="item.menuName" :index="filterPath(item.path,index)" @click="open(item)">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.menuName }}</span>
      </el-menu-item>
      <el-submenu v-else :index="filterPath(item.menuName,index)" :key="item.menuName">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title" :class="{'el-menu--display':isCollapse}">{{item.menuName}}</span>
        </template>
        <template v-for="(child,index) in item.children">
          <el-menu-item v-if="child.children == null" :key="index" :index="filterPath(child.path,index)" @click="open(child)">
            <i :class="child.icon"></i>
            <span slot="title">{{ child.menuName }}</span>
          </el-menu-item>
          <sidebar-item v-else :menu="[child]" :key="index" :isCollapse="isCollapse"></sidebar-item>
        </template>
      </el-submenu>
    </template>
  </div>
</template>

<script>
  import {resolveUrlPath} from "@/util/util";

  export default {
    name: "SidebarItem",
    data() {
      return {};
    },
    props: {
      menu: {
        type: Array
      },
      isCollapse: {
        type: Boolean
      }
    },
    created() {
    },
    mounted() {
    },
    computed: {},
    methods: {
      filterPath(path, index) {
        return path == null ? index + "" : path;
      },
      open(item) {
        this.$router.push({
          path: resolveUrlPath(item.path, item.menuName),
          query: {name: item.menuName, src: item.path}
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>

